<?php
session_start();
if($_SESSION['auth']!='1'){
    header('location:qr.html');
}
?>
    <!DOCTYPE html>
    <html ng-app="phonecatApp">

    <head>
        <title>真相只有一个</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/h5style/css/import-min.css">
        <!-- 1.7.1/1.11.1/2.1.1 -->
        <script type="text/javascript" src="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/jQuery/Lib/jquery-1.11.1.min.js"></script>
        <link rel="stylesheet" href="js/spinkit/angular-spinkit.min.css">
        <script src="js/angular.1.5.0.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script type="text/javascript" src="js/angular-animate.min.js"></script>
        <script src="js/spinkit/angular-spinkit.min.js"></script>
        <style type="text/css">
        .header {
            position: fixed;
            top: 0px;
            width: 100%;
            background-color: #fff;
            padding: 10px 0px;
            z-index: 999;
        }
        
        .Label_highlight {
            color: red;
        }
        
        .highlight {
            border-bottom: 1px solid #e0e0e0;
            padding: 4px 0px;
        }
        
        .title {
            margin: -10px -15px 10px -15px;
            padding: 10px 15px;
            background-color: #f5f5f5;
        }
        </style>
    </head>

    <body>
        <div class="container-fluid" ng-controller="SearchController">
            <!-- search -->
            <div class='row header'>
                <div class="col-xs-3" style="padding-right:0px;">
                    <select name="" id="input" class="form-control" required="required" style="padding:5px; height:44px;" ng-model="category">
                        <option value="exam">题目</option>
                        <option value="article">文章</option>
                    </select>
                </div>
                <div class='col-xs-9'>
                    <div class='search-box'>
                        <form class='search-form'>
                            <input class='form-control' ng-model="key" placeholder='输入关键字' type='text'>
                            <button class='btn btn-link search-btn' ng-click="search()">
                                <i class='glyphicon glyphicon-search'></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- serach -->
            <br>
            <br>
            <br>
            <div id="listContainer">
                <div class="list-group" ng-show="loading">
                    <a class="list-group-item">
                        <center>
                            <p class="list-group-item-heading"><i class="fa fa-spin fa-spinner"></i> &nbsp; 正在加载中...</p>
                        </center>
                    </a>
                </div>
                <div class="list-group" ng-repeat="item in items">
                    <a class="list-group-item">
                        <p class="list-group-item-heading highlight title">{{item.data}}</p>
                        <div class="highlight" ng-repeat="line in item.more">{{line.data}}</div>
                    </a>
                </div>
                <div class="list-group" ng-show="empty">
                    <a class="list-group-item">
                        <p class="list-group-item-heading">没有找到相关数据</p>
                    </a>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
    var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'angular-spinkit']);
    phonecatApp.config(['$routeProvider', function($routeProvider) {}]);

    phonecatApp.controller('SearchController', function($scope, $http) {
        // $scope.pageClass = "pageGo";
        // $scope.message = "This page will be used to display add student form";
        var i = 0;
        $scope.items = [];
        $scope.loading = false;
        $scope.empty = true;
        $scope.key = '建设银行 贷款 公积金';
        $scope.category = 'exam';
        $scope.search = function() {

            $scope.loading = true;
            $scope.items = [];
            $http({
                    method: 'POST',
                    url: "s.php",
                    data: {
                        key: $scope.key,
                        category: $scope.category
                    }
                })
                .then(function(response) {

                    try {
                        $scope.items = response.data.records;
                        if ($scope.items.length == 0) {
                            $scope.empty = true;
                        } else {
                            $scope.empty = false;
                        }
                        $scope.loading = false;
                        setTimeout(function() {
                            HighLight();
                        }, 100);
                    } catch (e) {
                        $scope.loading = false;
                        $scope.empty = true;
                        $scope.items = [];
                    }

                    // $scope.$apply();
                    // console.log($scope.items.length);
                    // console.log($scope.empty);
                });
        };
        // $scope.toggle = function(){
        //     $scope.empty = !$scope.empty;
        // }
    });

    function HighLight() {
        $('.highlight').each(function() {
            var tmp = $(this).html();
            tmp1 = tmp.replace(/~#@#/g, "<label class='Label_highlight'>");
            tmp2 = tmp1.replace(/@#@~/g, "</label>");
            $(this).html(tmp2);
        });
    }
    </script>
    <script type="text/javascript">
    var str = "Visit Microsoft!"
    document.write()
    </script>
    <style type="text/css">
    .container-fluid {
        padding-top: 20px;
    }
    
    .search-box {
        display: inline-block;
        width: 100%;
        border-radius: 3px;
        padding: 4px 55px 4px 15px;
        position: relative;
        background: #fff;
        border: 1px solid #ddd;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    
    .search-box.hovered,
    .search-box:hover,
    .search-box:active {
        border: 1px solid #aaa;
    }
    
    .search-box input[type=text] {
        border: none;
        box-shadow: none;
        display: inline-block;
        padding: 0;
        background: transparent;
    }
    
    .search-box input[type=text]:hover,
    .search-box input[type=text]:focus,
    .search-box input[type=text]:active {
        box-shadow: none;
    }
    
    .search-box .search-btn {
        position: absolute;
        right: 2px;
        top: 2px;
        color: #aaa;
        border-radius: 3px;
        font-size: 21px;
        padding: 5px 10px 1px;
        -webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }
    
    .search-box .search-btn:hover {
        color: #fff;
        background-color: #8FBE00;
    }
    </style>

    </html>
